<!--
 * @Descripttion: 交接班
 * @version: 
 * @Author: ye_zhiguo
 * @Date: 2021-08-20 09:55:39
 * @LastEditTime: 2021-08-21 16:15:15
-->
<template>
    <div id="handClass">
        <!-- <van-nav-bar title="运行值班-交接班" left-arrow @click-left="back" /> -->
        <Theader title="运行值班-交接班" :headerStyle="{color:'#333',backgroundColor: '#fff'}" :textStyle="{color:'#333'}"
            :titleStyle="{color:'#333'}">
            <template slot="header_arrow">
                <van-icon size="17" name="arrow-left" @click="back" />
            </template>
        </Theader>
        <!-- 上次交班情况 -->
        <div class="assets-box">
            <div class="assets-container">
                <div class="container-title">
                    <img src="../../images/icon_pm_title.png"
                        style="padding-right: 1rem;height:1.0625rem;width:1.0625rem;">
                    <span>交班情况</span>
                </div>
                <div class="container-text">
                    <van-cell-group>
                        <van-cell title="上次交班时间" value="2021/4/21"></van-cell>
                        <van-cell title="交接单位名称" value="下关变电站运维班组"></van-cell>
                        <van-cell title="上次班次" value="运维三班"></van-cell>
                        <van-cell title="天气情况" value="阴"></van-cell>
                        <van-cell title="气温" value="25℃"></van-cell>
                        <van-cell title="值班长" value="周勇"></van-cell>
                        <van-cell title="副值长" value="周勇"></van-cell>
                        <van-cell title="值班人员" value="刘安智、刘涛"></van-cell>
                    </van-cell-group>
                </div>
            </div>
        </div>
        <!-- 本次交班情况 -->
        <div class="assets-box">
            <div class="assets-container">
                <div class="container-title">
                    <img src="../../images/icon_pm_title.png"
                        style="padding-right: 1rem;height:1.0625rem;width:1.0625rem;">
                    <span>接班情况</span>
                </div>
                <div class="container-text">
                    <van-form>
                        <van-field label="本次交班时间" readonly @click="showPicker  = true" v-model="handList.handTime"
                            input-align="right" />
                        <van-field label="交接单位名称" v-model="handList.handTeam" input-align="right" />
                        <van-field label="交接班次" v-model="handList.handClass" placeholder="请选择" input-align="right" />
                        <van-field label="天气" v-model="handList.weather" placeholder="请选择" input-align="right" />
                        <van-field label="气温" v-model="handList.airTemperature" placeholder="请选择" input-align="right" />
                        <van-field label="值班长" v-model="handList.dutyLeader" input-align="right" />
                        <van-field label="副值长" v-model="handList.viceLeader" input-align="right" />
                        <van-field label="值班人员" v-model="handList.onDuty" input-align="right" />
                        <van-cell title="录音文件" :value="handList.record" input-align="right">
                            <template #label>
                                <div class="labelRecord">
                                    <img src="">
                                    <span class="custom-title">65''</span>
                                </div>
                            </template>
                        </van-cell>
                    </van-form>
                </div>
            </div>
        </div>
        <div class="footer-box">
            <button class="confirm-btn">接班</button>
        </div>

        <!-- 选择时间弹窗 -->
        <van-popup v-model="showPicker" position="bottom">
            <van-datetime-picker type="datetime" @confirm="onConfirm" @cancel="showPicker = false" />
        </van-popup>
    </div>
</template>

<script>
    import Theader from "../component/header"
    export default {
        components: {
            Theader
        },
        data() {
            return {
                handList: {
                    handTime: '2021/4/21 10:16:12',
                    handTeam: '下关变电站运维班组',
                    handClass: '',
                    weather: '',
                    airTemperature: '',
                    dutyLeader: '刘安智',
                    viceLeader: '周勇',
                    onDuty: '刘安智、刘涛',
                    record: ''
                },
                showPicker: false,
            }
        },
        methods: {
            /**
             * @description: 返回
             */
            back() {
                this.$router.push({
                    name: 'dutyHome'
                })
            },
            /**
             * @description: 提交交班信息
             */
            onSubmit(values) {
                console.log('submit', values);
            },
            onConfirm(date) {
                console.log(date);
                // this.handList.handTime = date;
                this.showPicker = false;
            },
        }
    }
</script>

<style>
    #handClass .assets-box {
        /* height: calc(100vh - 66px); */
        padding: 10px;
        background: #F5F6F7;
    }

    #handClass .assets-container {
        /* height: calc(100% - 3rem); */
        /* overflow: auto; */
        background: #fff;
        padding: 20px;
        border-radius: 4px;
        box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
        background-image: url(../../images/image_pm_form_bg.png);
        background-size: 100% 100%;
    }

    #handClass .container-title {
        font-size: 1.0625rem;
        padding: 1rem;
        display: flex;
        align-items: center;
    }

    #handClass .container-text {
        font-size: 0.8125rem;
        color: #999999
    }

    #handClass .footer-box {
        height: 3rem;
        background: #fff;
        padding: 0.5rem;
    }

    #handClass .footer-box .confirm-btn {
        height: 100%;
        width: 100%;
        background: #0EB295;
        border-radius: 5px;
        border: #0EB295;
        color: #fff;
        font-size: 1.0625rem;
    }
</style>